<template>
  <div class="lg:sticky lg:top-[7rem] flex flex-col gap-4">
    <h2 class="font-medium text-[1.25rem] text-[#121212] hidden lg:flex">
      {{ $t('pages.classification') }}
    </h2>
    <div>
      <nuxt-link
        class="hovdrs flex gap-3 justify-between items-center py-3 pr-4 cursor-pointer"
        v-for="item in filteredChild"
        :key="item.id"
        :to="localePath(`/game-category/${item.code}`)"
        :class="code == item.code ? 'selectbackground' : 'text-[#666666]'"
      >
        <template>
          <div class="flex gap-3 items-center">
            <div class="size-[1.13rem]">
              <img
                v-lazy="$globalFn.imgPrefixUrl(item.pic_image2 || '')"
                alt="Game category active icon"
                title="Selected game category"
                class="size-full flex-none"
                v-if="code == item.code"
              />
              <img
                v-lazy="$globalFn.imgPrefixUrl(item.pic_image || '')"
                alt="Game category icon"
                title="Game category thumbnail"
                class="size-full flex-none"
                v-else
              />
            </div>
            <h2 class="font-medium text-[0.88rem] line-clamp-1 capitalize">
              {{ item.name }}
            </h2>
          </div>
          <span class="font-semibold text-[0.88rem] text-[#b3b3b3]">
            {{ item.num || 0 }}
          </span>
        </template>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      showActive: {
        type: Boolean,
        default: true
      },
      // 优化类型定义，使用数组形式声明多个类型
      activeId: {
        type: [String, Number],
        default: ''
      },
      classify: {
        type: Object,
        required: true, // 将必需的prop标记为required
        validator(value) {
          // 添加属性验证
          return value && Array.isArray(value._child)
        }
      }
    },
    data() {
      return {
        code: ''
      }
    },
    computed: {
      filteredChild() {
        return this.classify._child.filter(item => item.num)
      }
    },
    created() {
      // 从路由参数获取ID
      this.code = this.$route.params.code
    },
    methods: {}
  }
</script>
<style lang="less" scoped>
  .selectbackground {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffebe5 100%) !important;
    border-radius: 0 32px 32px 0;
    color: #ff4e33 !important;
  }
  .hovdrs:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #efefef 100%);
    border-radius: 0 32px 32px 0;
    // color: #ff4e33 !important;
    @apply duration-300 transition-colors;
  }
</style>
